<template>
  <div :class="layoutData.cls">
    <template v-for="(k,i) in layoutData.keys">
      <layout v-if="Array.isArray(k)" :layout="k" :key="i + k.join('-')"></layout>
      <panel v-else :key="i + getName(k)" v-bind="getModelData(k)"></panel>
    </template>
  </div>
</template>

<script>
import panel from "./panel.vue"
import {getModelData} from "@/util/util"
import {merge} from "lodash-es"
//
export default {
  name:"layout",
  components:{panel},
  props:['layout'],
  data:() => ({
    modelData:{},
  }),
  computed:{
    layoutData(){
      const [cls,...keys] = this.layout || [];
      return {cls,keys}
    },
  },
  methods:{
    getName(d){
      if(typeof d === 'string'){
        return d;
      }
      return d?.name || '';
    },
    getModelData(d){
      console.log('....getModelData..===>',d)
      const n = this.getName(d);
      const dm = JSON.parse(JSON.stringify(this.modelData[n] || {}));
      delete dm.formColumn;
      if(typeof d === 'object' && d.model != undefined){
        return merge(dm,d.model)
      }
      return {...dm};
    },
    async initModelData(){
      this.modelData = await getModelData();
    }
  },
  created(){
    this.initModelData();
    //
  }
}
</script>